<template>
  <div class="content">
    <section class="col">
      <header class="title">
        <h2>{{ title }}</h2>
      </header>
      <div class="contents">
        <div v-for="(data, index) in timelineData" class="main" v-bind:class="{ active: isActive === index }" @click="handleChange(data,index)">
          <div class="time">{{ data.time }}</div>
          <div class="desc-box">
            <p>{{ data.content }}</p>
            <img v-if="data.state==='1'" class="state" src="@/assets/images/dealed.png">
            <img v-if="data.state!=='1'" class="state" src="@/assets/images/undeal.png">
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',
  props: {
     title: {
        type: String,
        required: true
     },
      timelineData: {
        type: Array,
         required: true
     },
  },
  data() {
     return {
         isActive: 0,
     };
  },
  methods:{
      handleChange(data,index){
          this.isActive=index
          //this.$emit('timeClick', data);
          this.$parent.timeClick(data);
      }
  }
}
</script>

<style scoped>
  .content{
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  .col .title{
    font-family: Helvetica;
    color: #409EFF;
    padding: 0px 0px 20px 30px;
  }

  .col .contents{
    padding: 0px 30px;
    border-left: 2px solid #bababa
  }
  .col .contents .main{
    position: relative;
    padding: 20px 0px;
    margin-bottom: 20px;
  }
  .col .contents .main::before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    right: calc( 100% + 23px );
    top: 0;
    background-color: #909399;
    border: 2px solid white;
  }
  .col .contents .active::before{
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    right: calc( 100% + 22px );
    top: 0;
    background-color: #409EFF;
    border: 2px solid white;
  }

  .col .contents .main .time{
    width: 120px;
    height: 35px;
    border-radius: 20px;
    color: #fff;
    background-color: #909399;
    display: grid;
    place-items: center;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .col .contents .active .time{
    width: 120px;
    height: 35px;
    border-radius: 20px;
    color: #fff;
    background-color: #409EFF;
    display: grid;
    place-items: center;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .col .contents .main .desc-box{
    border-radius: 4px;
    border: 1px solid #909399;
    background-color: #ffffff;
    padding: 0 10px;
    font-size: 14px;
    position: relative;
  }

  .col .contents .main .desc-box:hover{
    border-radius: 4px;
    border: 1px solid #909399;
    background-color: #ffffff;
    padding: 0 10px;
    box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.384);
  }


  .col .contents .active .desc-box{
    border-radius: 4px;
    border: 2px solid #409EFF;
    background-color: #ffffff;
    padding: 0 10px;
    position: relative;
  }

  .desc-box .state{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;

  }
</style>
